<!-- 地图 -->
<template>
    <div>
         <div id="main" style="height:500px"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    props: {

    },
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
  var myChart = this.$echarts.init(document.getElementById('main'));
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [{
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                        {name:'四川',selected:true}
                    ]
                }]
            };
            // var ecConfig = require('echarts/config');
            var ecConfig = this.$echarts.config;
            console.log(option)
            console.log(this.$echarts)

            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                var selected = param.selected;
                var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
                for (var p in selected) {
                    if (selected[p]) {
                        switch(p){
                            case '河南':
                                location.href = urlArr[0];
                                break;
                            case '重庆':
                                location.href = urlArr[1];
                                break;
                            default:
                                break;
                        }

                    }
                }
            });
            // 为echarts对象加载数据
            myChart.setOption(option)
    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped>

</style>
